<script setup lang="ts">
import handlePopover from '@renderer/utils/handlePopover'

const props = defineProps<{
  lineFormItem: collectionItemModel[]
}>()

const { findPopoverContent } = handlePopover()
const handleChange = (event, item) => {
  if (item == '双眼皮/石膏线') {
    if (event == 0) {
      props.lineFormItem.forEach((item) => {
        if (item.name == '石膏线几圈') {
          item.value = '1'
        }
      })
    } else if (event == 1) {
      props.lineFormItem.forEach((item) => {
        if (item.name == '双眼皮木方基架') {
          item.value = 0
        }
      })
    }
  }
}
</script>

<template>
  <el-form :model="props.lineFormItem">
    <el-row :gutter="20">
      <template v-for="(item, index) in props.lineFormItem" :key="index">
        <el-col
          :span="8"
          v-if="
            item.name == '石膏线几圈' || item.name == '双眼皮木方基架'
              ? props.lineFormItem[2].value == 1 && item.name == '石膏线几圈'
                ? true
                : props.lineFormItem[2].value == 0 && item.name == '双眼皮木方基架'
                  ? true
                  : false
              : true
          ">
          <el-form-item :key="index" label-width="130">
            <template #label>
              <span @click="findPopoverContent(item.name)">{{ item.name + ':' }}</span>
            </template>
            <el-input v-model="item.value" type="number" @mousewheel.native.prevent placeholder="请输入" v-if="item.type == 1">
              <template #append>{{ item.unit }}</template>
            </el-input>
            <el-radio-group v-model="item.value" placement="row" v-else @change="handleChange($event, item.name)">
              <el-radio
                :label="item.options ? item.options[0] : '是'"
                :value="1"
                :customStyle="{ marginRight: '35px' }" />
              <el-radio :label="item.options ? item.options[1] : '否'" :value="0" />
            </el-radio-group>
          </el-form-item>
        </el-col>
      </template>
    </el-row>
  </el-form>
</template>
<style lang="scss" scoped>
::v-deep .el-radio__input.is-checked + .el-radio__label {
  color: #ff9600 !important;
}
.el-form-item {
  margin-bottom: 10px;
  margin-right: 20px !important;
  flex: 1;
  display: flex;
}
::v-deep .el-radio__input.is-checked .el-radio__inner {
  background: #ff9600 !important;
  border-color: #ff9600 !important;
}
</style>
